


export default {
    data:{
            leftArrCopy:[],
            leftArr:[],
            arr: [], //存放图片路径
            startPoint: 0, //点击起始位置
            newX: 0,
            index: 0, //控制图片
            num: 0,
            clientWidth:0,//容器宽
            spacing:0,//移动间距
            timer:null,
            direction:1,
            sec:0,
            oldNum:0,
            auto:null,
            pointerEvent:false,//是否禁用事件
    },
    props:{
        imgArr: {
            type:Array,
            default:['../default/common/images/a1.jpg']
        },
        //底部激活状态颜色
        liColor:{
            type:String,
            default:'red'
        },
        //组件高度
        swipeHeight:{
            type:Number,
            default:250
        },
        //是否开启自动播放
        autoplay:{
            type:Boolean,
            default:false
        },
        //播放间隔
        timing:{
            type:Number,
            default:2000
        }
    },
    onReady() {
        setTimeout(()=>{
            //获取组件宽度
            this.clientWidth=this.$refs.moveBox.getBoundingClientRect().width;
            let screenWidth=this.clientWidth;
            //设置 spacing值
            this.spacing=this.clientWidth/4;
            if(!(this.imgArr instanceof Array)) return;
            //初始化 传入的图片数组
            this.arr = [
                this.imgArr[this.imgArr.length - 2],
                this.imgArr[this.imgArr.length - 1],
                ...this.imgArr,
                this.imgArr[0],
            ];
            //初始化left值
            this.leftArr=this.arr.map((item,id)=> (-2+id)*screenWidth);
            //备份 整体位置
            this.leftArrCopy=[...this.leftArr];
            //是否开启自动播放
           this.autoplay && this.autoPlay();

        },100)
        //初始化修改图片数组
    },
    //手指点下
    moveStart(e) {
        //记录手指点下的起始位置
        this.startPoint = e.touches[0].localX;
        //记录固定的起始数据
        this.startPointCopy=this.startPoint;
        //开放事件
        this.pointerEvent=true;
        clearInterval(this.auto);
        this.auto=null;
        console.log(this.leftArrCopy);
    },
    move(e) {
        //移动的距离
        this.newX = e.touches[0].localX - this.startPoint;
        //重置起点
        this.startPoint=e.touches[0].localX;
        //改变整体的left值 随着手指移动
        this.leftArr=this.leftArr.map((item)=> item+this.newX);
    },
   moveEnd() {
       //计算移动了的距离
        let direction=this.startPoint-this.startPointCopy;
        //判断移动的距离是否大于spacing值
        if (Math.abs(direction) > this.spacing) {
            //根据newX值判断方向
            if (this.newX < 0) {
                //向右
                this.index++;
                this.direction=1;
            } else {
                //向左
                this.index--;
                this.direction=-1;
            }
            //开始移动
            this.startMove();
        }else{
            //没有超过spacing 则回弹
            //确定回弹方向
            this.direction=this.newX>0? -1:1;
            //回弹移动
            this.moveBack();
        }

    },
    autoPlay(){
        this.auto=setInterval(()=>{
            //根据移动方向改变index值
            this.index=this.index+this.direction;
            this.timer=setInterval(()=>{
                this.changeLeft();
                //当累计和大于等于容器宽时 展示完整图片
                if(Math.abs(this.oldNum)>=this.clientWidth){
                    this.comeBack();
                    this.stopMove();
                }
            },10);
            console.log(this.leftArrCopy);
        },this.timing)
    },
    //开始移动
    startMove(){
        //计算剩余所需移动的距离
        let a=this.clientWidth-Math.abs(this.startPoint-this.startPointCopy);
        this.timer=setInterval(()=>{
            this.changeLeft();
            //当累计和大于等于剩余所需移动的距离时
            if(Math.abs(this.oldNum)>=Math.abs(a)){
                //图片归位
                this.comeBack();
                //图片归位后开启自动播放
                this.autoplay && this.autoPlay();
            }
        },10);
    },
    //停止移动
    stopMove(){
        //开放触摸事件
        this.pointerEvent=false;
        //清除定时器
        clearInterval(this.timer);
        this.timer=null;
        //清空数值
        this.sec=0;
        this.oldNum=0;
    },
    changeLeft(){
        this.sec-=this.direction;
        //移动距离累计和
        this.oldNum=this.sec+this.oldNum;
        //改变整体left值
        this.leftArr=this.leftArr.map((item)=> parseInt(item+this.sec));
    },
    // 移动距离过小 开始回弹
    moveBack(){
        this.timer=setInterval(()=>{
            this.sec+=this.direction;
            //移动距离累计和
            this.oldNum=this.sec+this.oldNum;
            //改变整体left值
            this.leftArr=this.leftArr.map((item)=> parseInt(item+this.sec));
            //累计和大于移动距离时 图片回弹
            if(Math.abs(this.oldNum)>=Math.abs(this.startPoint-this.startPointCopy)){
                this.leftArr=this.leftArrCopy.map((item,id)=> (-2+id-this.index)*this.clientWidth);
                this.stopMove();
            }
        },20)
    },
    //位置判断
    comeBack(){
        //到达右边界回归原位
        this.num=this.index;
        if (this.index === this.arr.length - 4 ) {
            this.index=-1;
            this.num=this.imgArr.length - 1;
        }
        //到达左边界回归原位
        if (this.index === -2 ) {
            this.index=this.arr.length - 5;
            this.num=this.imgArr.length - 2;
        }
        if(this.index===-1){
            this.num=this.imgArr.length - 1;
        }
        //改变left值
        this.leftArr=this.leftArrCopy.map((item,id)=> (-2+id-this.index)*this.clientWidth);
        this.stopMove();
    },
}